import React, { useState, useRef, useEffect } from 'react';
import { Modal, Card, Tabs, Steps, Button, Space, notification } from 'antd';
import { connect } from 'umi';
import Offline from '@/components/SelectModel/components/OfflineGoods'
import LiveCourse from '@/components/SelectModel/components/liveGoods'
import VideoCourse from '@/components/SelectModel/components/videoCourse'
import LiveCourses from '@/components/SelectModel/components/liveCourse'
import FaceToFace from '@/components/SelectModel/components/faceToFace'
import SetTableShop from '../setTableShop';
const SelelctModel = (props) => {
    const { dispatch, detaultShopList, visible = {}, handleCallback, loading, onClose, onOk, data = {}, getCheckboxProps = false, hasSku = '0', payType = false } = props;
    const { show = false, details = [] } = visible;
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [current, setCurrent] = useState(0);
    const [activeTabKey, setActiveTabKey] = useState('offline');
    const [promoterLevelList, setPromoterLevelList] = useState([])
    const ref = useRef(null)
    const stepFooter = () => {
        if (current === 0) {
            return <Space>
                <Button onClick={() => {
                    onClose();
                }}>取消</Button>
                <Button type='primary' onClick={() => {
                    if (selectedRowKeys.length > 0) {
                        setCurrent(1)
                    } else {
                        notification.warn({
                            message: '温馨提示',
                            description: `请先选择要设置比例的商品`,
                        });
                    }

                }} >下一步</Button>
            </Space>
        }
        else {
            return <Space>
                <Button onClick={() => { setCurrent(0) }}>上一步</Button>
                <Button loading={loading} onClick={() => {
                    const promoterGoodsList = ref.current.fetchData
                    if (promoterGoodsList.length === 0) {
                        notification.warn({
                            message: '温馨提示',
                            description: `请先选择要设置比例的商品`,
                        });
                    }
                    else {

                        dispatch({
                            type: 'promoter/fakeSavePromoterGoods',
                            payload: {
                                promoterGoodsList
                            },
                            callback: (e) => {
                                onClose()
                                handleCallback()
                            }
                        })
                    }
                    // fakeSavePromoterGoods
                }} type='primary'>确认</Button>
            </Space>
        }
    }
    useEffect(() => {
        fetchData()
    }, [])
    useEffect(() => {
        if (!show) {
            setSelectedRowKeys([])
            setCurrent(0)
        } else {
            setSelectedRowKeys(details)
        }
    }, [show])
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterLevelDetail',
            callback: (e) => {
                const { promoterLevelList } = e
                setPromoterLevelList(promoterLevelList)
            }
        })
    }
    const modalProps = {
        title: `设置比例`,
        width: 1200,
        visible: show,
        zIndex: 1001,
        footer: stepFooter()
    };

    const onChangeOfflineKeys = (e) => {
        setSelectedRowKeys(e)
    }
    const onChangeDirectLive = (e) => {
        setSelectedRowKeys(e)
    }
    const onChangeVideoCourse = (e) => {
        setSelectedRowKeys(e)
    }
    const onChangeLiveCourse = (e) => {
        setSelectedRowKeys(e)
    }
    const onChangeFaceToFace = (e) => {
        setSelectedRowKeys(e)
    }
    const tabList = [
        {
            key: 'offline',
            label: '实物商品',
            show: true,
            children: <Offline payType={payType} hasSku={hasSku} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeOfflineKeys} selectedRowKeys={selectedRowKeys} data={data}></Offline>
        },
        {
            key: 'directLive',
            label: '直播商品',
            show: true,
            children: <LiveCourse payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeDirectLive} selectedRowKeys={selectedRowKeys} data={data}></LiveCourse>
        },
        {
            key: 'videoCourse',
            label: '点播课程',
            show: true,
            children: <VideoCourse payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeVideoCourse} selectedRowKeys={selectedRowKeys} data={data}></VideoCourse>
        },
        {
            key: 'liveCourse',
            label: '直播课程',
            show: true,
            children: <LiveCourses payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeLiveCourse} selectedRowKeys={selectedRowKeys} data={data}></LiveCourses>
        },
        {
            key: 'faceToFace',
            label: '面授商品',
            show: true,
            children: <FaceToFace payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeFaceToFace} selectedRowKeys={selectedRowKeys} data={data}></FaceToFace>
        },

    ];
    const renderStep = {
        0: <Tabs
            tabPosition={'left'}
            items={tabList.filter(item => {
                return item.show
            })}
            activeKey={activeTabKey}
            onChange={(key) => {
                setActiveTabKey(key);
            }}
        >

        </Tabs>,
        1: <SetTableShop promoterLevelList={promoterLevelList} ref={ref} defaultList={selectedRowKeys.map(item => {
            return {
                ...item,
                id: '',
                goodsId: item.id
            }
        })}></SetTableShop>
    }[current]
    return (
        <Modal
            {...modalProps}
            onCancel={onClose}
            onOk={() => {
                // onOk && onOk(selectedRowKeys);
                onClose();
            }}
        >
            <div style={{ height: 680, paddingTop: 24, overflowY: 'auto' }}>
                <Steps
                    type="navigation"
                    size="small"
                    current={current}
                    // onChange={(value) => {
                    //     setCurrent(value);
                    // }}
                    className="site-navigation-steps"
                    items={[
                        {
                            title: '选择商品',
                        },
                        {
                            title: '设置比例',
                        },
                    ]}
                />
                {renderStep}
            </div>

        </Modal>
    )
}
export default connect(({ promoter, loading }) => ({
    loading: loading.effects['promoter/fakeSavePromoterGoods'],
}))(SelelctModel);
;

